Trang này được dịch bởi Cloud Translation API.

Xoay vòng mẫu quảng cáo bằng API URL chọn lọc
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Sử dụng Select URL API để tận dụng Shared Storage nhằm xác định mẫu quảng cáo mà người dùng nhìn thấy trên các trang web.

Nhà quảng cáo hoặc nhà sản xuất nội dung có thể muốn áp dụng nhiều chiến lược xoay vòng nội dung cho một chiến dịch, đồng thời xoay vòng nội dung hoặc mẫu quảng cáo để tăng hiệu quả. Bạn có thể sử dụng API URL chọn để chạy nhiều chiến lược xoay vòng, chẳng hạn như xoay vòng tuần tự và xoay vòng phân bổ đều, trên nhiều trang web.

Với tính năng luân phiên mẫu quảng cáo Select URL API, bạn có thể lưu trữ dữ liệu, chẳng hạn như mã mẫu quảng cáo, số lượt xem và lượt tương tác của người dùng để xác định mẫu quảng cáo mà người dùng nhìn thấy trên các trang web khác nhau.

Để biết thêm thông tin về API cơ bản và cách hoạt động của lựa chọn, hãy tham khảo tài liệu về API Lựa chọn URL.

Thử xoay vòng mẫu quảng cáo

Để thử nghiệm tính năng xoay vòng mẫu quảng cáo, hãy đảm bảo bạn đã bật API Lựa chọn URL và Bộ nhớ dùng chung:

Trong chrome://settings/content/siteData, hãy chọn Allow sites to save data on your device hoặc Delete data sites have saved to your device when you close all windows.
Trong chrome://settings/adPrivacy/sites, hãy chọn Site-suggested ads.

Hãy thử bản minh hoạ trực tiếp về Shared Storage để xem phiên bản trực tiếp của các mã mẫu trong tài liệu này.

Bản minh hoạ bằng mã mẫu

Trong ví dụ này:

creative-rotation.js là tập lệnh của bên thứ ba xác định nội dung cần xoay, cùng với mọi dữ liệu xác định nội dung tiếp theo cần chọn và hiển thị, chẳng hạn như trọng số trong ví dụ này. Trang nhà xuất bản sẽ thực thi tập lệnh này. Tập lệnh này gọi worklet bộ nhớ dùng chung để xác định nội dung cần hiển thị dựa trên dữ liệu có sẵn trong bộ nhớ và danh sách URL để chọn.
creative-rotation-worklet.js là công cụ lưu trữ dùng chung của bên thứ ba, giúp tra cứu chiến lược xoay vòng, tính toán nội dung cần xuất bản tiếp theo và trả về nội dung đó.

Cách hoạt động của bản minh hoạ

Khi người dùng truy cập vào trang của nhà xuất bản, trang này sẽ tải tập lệnh creative-rotation.js của bên thứ ba. Tập lệnh xoay mẫu quảng cáo chịu trách nhiệm tải và chạy công cụ lưu trữ dùng chung. Tập lệnh cung cấp cho lệnh gọi worklet một danh sách URL để chọn.
Trong worklet, nếu bộ nhớ dùng chung chưa được khởi chạy, thì bộ nhớ sẽ được khởi chạy bằng chiến lược xoay vòng mẫu quảng cáo ban đầu và chỉ mục mẫu quảng cáo. Chiến lược xoay ban đầu được sử dụng trong bản minh hoạ này là chiến lược tuần tự.
Worklet này đọc chế độ xoay vòng từ bộ nhớ dùng chung và trả về chỉ mục của quảng cáo tiếp theo. Trong trường hợp chế độ xoay tuần tự, chế độ này cũng cập nhật chỉ mục mẫu quảng cáo trong bộ nhớ dùng chung bằng giá trị mới sẽ được sử dụng cho lệnh gọi tiếp theo.Worklet trả về một đối tượng FencedFrameConfig hoặc URN mờ dựa trên giá trị resolveToConfig được sử dụng khi gọi selectURL.
Tập lệnh xoay vòng mẫu quảng cáo hiển thị quảng cáo đã chọn trong Khung có hàng rào hoặc iframe. Hãy xem tài liệu về cách hiển thị quảng cáo để biết thông tin chi tiết về các loại dữ liệu trả về.
Khi người dùng thay đổi chế độ xoay, công cụ lưu trữ dùng chung sẽ cập nhật giá trị chế độ xoay mẫu quảng cáo được lưu trữ trong bộ nhớ dùng chung.
Khi tải lại trang nhà xuất bản, các bước 1-4 sẽ được lặp lại để cho phép chọn quảng cáo tiếp theo sẽ được xem dựa trên chiến lược xoay vòng đã chọn

Mã mẫu

Sau đây là mã mẫu cho creative-rotation.js và creative-rotation-worklet.js.

creative-rotation.js

const contentProducerUrl = 'https://your-server.example';

// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
  {
    url: `${contentProducerUrl}/ads/ad-1.html`,
    weight: 0.7,
  },
  {
    url: `${contentProducerUrl}/ads/ad-2.html`,
    weight: 0.2,
  },
  {
    url: `${contentProducerUrl}/ads/ad-3.html`,
    weight: 0.1,
  },
];

async function setRotationMode(rotationMode) {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  await creativeRotationWorklet.run('set-rotation-mode', {
    data: { rotationMode }
  });
  console.log(`creative rotation mode set to ${rotationMode}`);
}

async function injectAd() {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';

  // Run the URL selection operation to determine the next ad that should be rendered
  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
    data: DEMO_AD_CONFIG,
    resolveToConfig
  });

  const adSlot = document.getElementById('ad-slot');

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }
}

injectAd();

creative-rotation-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Initially set the storage to sequential mode for the demo
    await SelectURLOperation.seedStorage();

    // Read the rotation mode from Shared Storage
    const rotationMode = await sharedStorage.get('creative-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the creatives in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        console.log(`index = ${index} / next index = ${nextIndex}`);

        await sharedStorage.set('creative-rotation-index', nextIndex.toString());
        break;

      /**
       * Evenly-distributed rotation
       * - Rotates the creatives with equal probability
       * - Example: A=33% / B=33% / C=33%
       */
      case 'even-distribution':
        index = Math.floor(randomNumber * urls.length);
        break;

      /**
       * Weighted rotation
       * - Rotates the creatives with weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        console.log('data = ', JSON.stringify(data));
        // Find the first URL where the cumnulative sum of the weights
        // exceed the random number. The array is sorted by the weight
        // in descending order.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }

    console.log(JSON.stringify({ index, randomNumber, rotationMode }));
    return index;
  }

  // Set the mode to sequential and set the starting index to 0.
  static async seedStorage() {
    await sharedStorage.set('creative-rotation-mode', 'sequential', {
      ignoreIfPresent: true,
    });

    await sharedStorage.set('creative-rotation-index', 0, {
      ignoreIfPresent: true,
    });
  }
}

class SetRotationModeOperation {
  async run({ rotationMode }) {
    await sharedStorage.set('creative-rotation-mode', rotationMode);
  }
}

// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);

Hướng dẫn từng bước có ảnh chụp màn hình

Để truy cập vào tính năng Luân phiên mẫu quảng cáo bằng cách sử dụng Select URL API và Bộ nhớ dùng chung, hãy truy cập vào https://shared-storage-demo.web.app/. Chọn bản minh hoạ "Xoay vòng mẫu quảng cáo".
Chọn khám phá bản minh hoạ dưới vai trò "Nhà xuất bản A". Bạn sẽ được chuyển hướng đến https://shared-storage-demo-publisher-a.web.app/creative-rotation. Trang tải nội dung được đánh số dựa trên dữ liệu xoay vòng mẫu quảng cáo được lưu trong Bộ nhớ dùng chung, truy cập thông qua Select URL API. Các chế độ minh hoạ cho tính năng xoay vòng mẫu quảng cáo là tuần tự, phân phối đồng đều và phân phối theo trọng số. Worklet thực thi logic để chọn nội dung xuất hiện trong iframe. Hình ảnh sau đây cho thấy trang nhà xuất bản.
Ảnh chụp màn hình cho thấy trang Nhà xuất bản A có hình ảnh số 1 và các chế độ điều khiển để chọn chiến lược xoay mẫu quảng cáo.
Để xem nội dung được lưu trữ trong Shared Storage, hãy chuyển đến Application (Ứng dụng) -> Shared Storage (Bộ nhớ dùng chung) trong Chrome DevTools. Hai mục nhập được tạo cho bộ nhớ dùng chung. Có bộ nhớ trống cho nguồn gốc https://shared-storage-demo-publisher-a.web.app. Bộ nhớ này sẽ chứa bộ nhớ dành riêng cho nguồn gốc đó và sẽ vẫn trống trong bản minh hoạ của chúng ta vì nhà xuất bản không cần ghi vào bộ nhớ dùng chung. Xin lưu ý rằng một bộ nhớ tương tự sẽ được tạo cho Nhà xuất bản B khi bạn truy cập vào trang đó vào lúc khác để xem bản minh hoạ.
Công cụ của Chrome cho nhà phát triển hiển thị Bộ nhớ dùng chung trống cho Nhà xuất bản A.
Một mục Shared Storage khác sẽ được tạo cho nguồn gốc https://shared-storage-demo-content-producer.web.app. Đây là bộ nhớ của iframe bên thứ ba được nhúng trên trang của nhà xuất bản. Bộ nhớ này sẽ được dùng để chia sẻ dữ liệu giữa hai nhà xuất bản hiện có nhằm điều phối việc lựa chọn mẫu quảng cáo. Bộ nhớ dùng chung này sẽ được dùng để lưu thông tin về mẫu quảng cáo và chiến lược xoay vòng hiển thị bằng cách lưu hai cặp khoá-giá trị. Khoá đầu tiên được sử dụng trong bản minh hoạ là creative-rotation-index, có giá trị là chỉ mục mẫu quảng cáo hiện tại ở chế độ tuần tự. Khoá thứ hai là creative-rotation-mode, chỉ định chiến lược xoay được sử dụng.
Ảnh chụp màn hình cho thấy bộ nhớ dùng chung của Chrome DevTools với hai cặp khoá-giá trị: creative-rotation-index: 1 và creative-rotation-mode: "sequential".
Việc làm mới trang ở chế độ tuần tự sẽ hiển thị mẫu quảng cáo tiếp theo theo trình tự 1, 2, 3, 1, … Giá trị của khoá creative-rotation-index sẽ thay đổi theo chỉ mục của mẫu quảng cáo hiển thị ở chế độ tuần tự.
Ảnh chụp màn hình cho thấy trang web và DevTools của Nhà xuất bản A. Mẫu quảng cáo hiển thị là 2, creative-rotation-mode là tuần tự và creative-rotation-index là 2.
Việc thay đổi chế độ xoay mẫu quảng cáo bằng các nút điều khiển sẽ cập nhật giá trị của khoá creative-rotation-mode vào chiến lược tương ứng. Mã worklet sẽ sử dụng giá trị này để chọn mẫu quảng cáo tiếp theo sẽ hiển thị trong iframe. Xin lưu ý rằng giá trị được lưu cho creative-rotation-index không thay đổi đối với các chế độ xoay khác ngoài tuần tự.
Ảnh chụp màn hình cho thấy trang web và DevTools của Nhà xuất bản A. Mẫu quảng cáo hiển thị là 1, creative-rotation-mode là phân phối theo trọng số và creative-rotation-index là 2 (không sử dụng).
Chuyển đến trang của "Nhà xuất bản B" tại https://shared-storage-demo-publisher-b.web.app/creative-rotation. Ở chế độ tuần tự, mẫu quảng cáo hiển thị phải là mẫu quảng cáo tiếp theo trong trình tự hiển thị khi truy cập vào URL của "Nhà xuất bản A". Khi kiểm tra Bộ nhớ dùng chung cho nhà sản xuất nội dung, bạn có thể thấy cả "Nhà xuất bản A" và "Nhà xuất bản B" đều dùng chung bộ nhớ và đang sử dụng chế độ cài đặt ở đó để chọn mẫu quảng cáo tiếp theo sẽ hiển thị và chiến lược xoay vòng sẽ sử dụng.
Trang web và Công cụ cho nhà phát triển của Nhà xuất bản B. Mẫu quảng cáo Bộ nhớ dùng chung là 3, chỉ mục creative-rotation là 3 và creative-rotation-mode là tuần tự.
Bộ nhớ dùng chung của "Nhà xuất bản B" trống, tương tự như Bộ nhớ dùng chung của "Nhà xuất bản A".
Công cụ của Chrome cho nhà phát triển hiển thị Bộ nhớ dùng chung trống cho nguồn gốc Nhà xuất bản B.

Trường hợp sử dụng

Bạn có thể xem tất cả các trường hợp sử dụng hiện có cho API Chọn URL trong phần này. Chúng tôi sẽ tiếp tục thêm ví dụ khi nhận được ý kiến phản hồi và khám phá các trường hợp kiểm thử mới.
- Xoay vòng mẫu quảng cáo: Lưu trữ dữ liệu, chẳng hạn như mã mẫu quảng cáo và lượt tương tác của người dùng, để xác định mẫu quảng cáo mà người dùng nhìn thấy trên các trang web.
- Chọn mẫu quảng cáo theo tần suất: Sử dụng dữ liệu về số lượt xem để xác định mẫu quảng cáo mà người dùng nhìn thấy trên các trang web.
- Chạy thử nghiệm A/B: Bạn có thể chỉ định người dùng cho một nhóm thử nghiệm, sau đó lưu trữ nhóm đó trong Bộ nhớ dùng chung để truy cập trên nhiều trang web.
- Tuỳ chỉnh trải nghiệm cho khách hàng đã biết: Chia sẻ nội dung tuỳ chỉnh và lời kêu gọi hành động dựa trên trạng thái đăng ký của người dùng hoặc các trạng thái khác của người dùng.

Tương tác và chia sẻ ý kiến phản hồi

Xin lưu ý rằng đề xuất về API Chọn URL đang được thảo luận và phát triển tích cực và có thể thay đổi.

Chúng tôi rất mong được nghe ý kiến của bạn về API Select URL.

Đề xuất: Xem lại đề xuất chi tiết.
Thảo luận: Tham gia cuộc thảo luận đang diễn ra để đặt câu hỏi và chia sẻ thông tin chi tiết của bạn.

Luôn nắm thông tin mới nhất

Danh sách gửi thư: Đăng ký danh sách gửi thư của chúng tôi để nhận thông tin cập nhật và thông báo mới nhất liên quan đến API Lựa chọn URL và API Bộ nhớ dùng chung.

Bạn cần được trợ giúp?

Hỗ trợ nhà phát triển: Kết nối với các nhà phát triển khác và nhận câu trả lời cho thắc mắc của bạn trong Kho lưu trữ hỗ trợ nhà phát triển Hộp cát về quyền riêng tư.